<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>《守望先锋》官方网站</title>
    <link rel="icon" href="https://blz.nosdn.127.net/1/overwatch/images/common/overwatch.ico" type="image/x-icon">
    <style>
        * {
            margin: 0;
            padding: 0;
            transition: all .2s;
        }

        .clearfix::after {
            content: "";
            display: block;
            clear: both;
        }

        .dev1_box {
            min-width: 1200px;
            height: 800px;
            position: relative;
            z-index: 99;
        }

        .dev1_tbox {
            width: 100%;
            background-color: rgba(0, 0, 0, 0.363);
            position: absolute;
            top: 0;
            z-index: 999;
        }

        .dev1_top {
            width: 80%;
            margin: 0 auto;
            height: 40px;
        }

        .dev1_top>div {
            display: inline-block;
        }

        .dev1_top>div:nth-of-type(1) {
            width: 100px;
            height: 40px;
            background: url("https://blz.nosdn.127.net/1/fsbnet/icon-sprite.png") no-repeat;
            background-size: 200px;
            background-position-y: -7px;
        }

        .dev1_top>div:nth-of-type(n+2) {
            color: rgb(197, 193, 193);
            vertical-align: top;
            line-height: 40px;
            margin-left: 20px;
            cursor: pointer;
        }

        .dev1_top>div:nth-of-type(2) {
            color: white;
        }

        .dev1_top>div:nth-of-type(n+2):hover,
        .dev1_fright>div:hover {
            color: white;
        }

        .dev1_xb {
            width: 20px;
            height: 10px;
            background: url("https://blz.nosdn.127.net/1/fsbnet/icon-sprite.png") no-repeat;
            background-size: 1000%;
            background-position: -111px -101px;
            display: inline-block;
            margin-left: -8px;
        }

        .dev1_fright {
            float: right;
            height: 100%;
            width: 400px;
        }

        .dev1_fright>div {
            display: inline-block;
            color: rgb(197, 193, 193);
        }

        .dev1_fright>div:nth-child(1) {
            margin-right: 100px;
        }

        .dev1_fright>div:nth-child(2) {
            margin-right: 30px;
        }

        .dev1_fright>div:nth-child(1)::before {
            content: url("https://blz.nosdn.127.net/1/common/juveniles.png");
            width: 10px;
            height: 9px;
            margin-right: 3px;
            vertical-align: middle;
        }

        .dev1_content {
            overflow: hidden;
            height: 800px;
            position: absolute;
            top: 0;
            z-index: 1;
        }

        #dev1_video {
            width: 100%;
            min-width: 1500px;
        }

        .dev1_buy {
            width: 85%;
            position: absolute;
            top: 100px;
            height: 50px;
            background-color: rgb(218, 218, 218);
            left: 0;
            right: 0;
            margin: 0 auto;
            z-index: 9999;
        }


        .dev1_buy>div:nth-of-type(1) {
            width: 56px;
            height: 50px;
            background: url("https://overwatch.nosdn.127.net/1/assets/img/logos/nav_logo_new.jpg") no-repeat;
            background-size: cover;
            float: left;
            cursor: pointer;
        }

        .dev1_buy>div:nth-of-type(n+2) {
            float: left;
            color: rgb(36, 36, 36);
            padding: 0 22px;
            border-right: 1px solid rgb(36, 36, 36);
            background-color: rgb(218, 218, 218);
            line-height: 50px;
            cursor: pointer;
        }

        .dev1_buy>div:nth-of-type(n+2):hover {
            background-color: rgb(36, 36, 36);
            color: orange;
        }

        .dev1_ora {
            background-image: url("https://overwatch.nosdn.127.net/1/assets/img/icons/menus/nav_arrow.png");
            width: 14px;
            height: 8px;
            display: inline-block;
            margin-left: 8px;
            vertical-align: middle;
        }

        .dev1_buy>div:nth-of-type(n+2):hover .dev1_ora {
            background-position-y: -8px;
        }

        .dev1_buy>button {
            float: right;
            height: 50px;
            border: none;
            padding: 0 40px;
            background-color: orange;
            color: white;
            font-size: 18px;
            cursor: pointer;
        }

        .dev1_18 {
            position: absolute;
            top: 155px;
            left: 140px;
            z-index: 99;
        }

        .dev1_suspend {
            position: absolute;
            bottom: 40px;
            left: 10%;
            cursor: pointer;
        }

        .dev1_suspend>div:nth-child(1) {
            width: 34px;
            height: 32px;
            background: url("https://overwatch.nosdn.127.net/1/assets/img/icons/menus/video_control_icon.png") no-repeat;
        }

        .dev1_suspend>div {
            display: inline-block;
            color: white;
            vertical-align: middle;
        }

        .dev1_c_logo {
            position: absolute;
            top: 0px;
            left: 0px;
            bottom: 0;
            right: 0;
            margin: auto;
            width: max-content;
            height: 200px;
      
        }

        .dev2 {
            box-sizing: border-box;
            min-width: 1200px;
            width: 100%;
        }

        .dev2-one {
            display: flex;
            flex-wrap: wrap;
            height: 450px;
      
            position: relative;
            z-index: 1;
        }

        .dev2-one-img {
            min-width: 1200px;
            position: relative;
            width: 100%;
            height: 450px;
            background: url("https://blz.nosdn.127.net/1/tm/overwatch/returns/Returns-HomeBanner-Desktop.jpg") no-repeat;
            background-size: cover;
   
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
    
            margin: auto;
            width: max-content;
            height: 200px;
        }

        .dev1_c_logo>div:first-child {
            width: 540px;
            height: 120px;
            background: url("https://overwatch.nosdn.127.net/1/assets/img/pages/home/logo_new_0321.png") no-repeat;
            background-size: cover;
        }

        .dev1_c_logo>div:last-child {
            width: max-content;
            margin: 10px auto;
        }

        .dev1_c_logo>div:last-child>button {
            color: white;
            width: 190px;
            line-height: 50px;
            font-size: 19px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .dev1_c_logo>div:last-child>button:first-child {
            margin-right: 40px;
            background-color: rgb(0, 183, 255);
        }

        .dev1_c_logo>div:last-child>button:last-child {
            background-color: orange;
        }

        .dev1_fixed {
            width: 100%;
            position: fixed;
            top: 0;
            height: 50px;
            z-index: 999;
 
            background-position: 40% 0;
        }

        .dev2-one-text {
            z-index: 1000;
            width: 560px;
            box-sizing: border-box;
            height: 50%;
            position: absolute;
            text-align: justify;
            top: 20%;
            left: 50%;
            padding: 0 10px;
        }

        .dev2-one-text h2 {
            font-style: italic;
            font-size: 48px;
        }

        .dev2-one-text p:first-of-type {
            color: rgb(247, 147, 0);
            font-size: 24px;
            margin: 10px 0;
        }

        .dev2-one-text p:nth-of-type(2) {
            font-size: 18px;
            margin: 10px 0;
            line-height: 28px;
            font-weight: 300;
        }

        .dev2-one-text button {
            background-color: rgb(247, 147, 0);
            color: #fff;
            text-align: center;
            width: 200px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            border: none;
            margin-top: 30px;
        }

        .dev2-two {
            padding: 0 10%;
            text-align: center;
            position: relative;
            height: 300px;
            z-index: 1;
        }

        .dev2-two-left {
            z-index: 1000;
            width: 600px;
            box-sizing: border-box;
            height: 60%;
            position: absolute;
            text-align: right;
            top: 20%;
            right: 50%;
        }

        .dev2-two-left p {
            font-size: 18px;

        }

        .dev2-two-right {
            background: url("https://blz.nosdn.127.net/1/tm/overwatch/FoundersPack_Desktop.jpg?auto=webp") no-repeat;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 100;
            background-position: 50% 0;

        }

        .dev2-two-left button {
            background-color: rgb(62, 190, 253);
            color: #fff;
            text-align: center;
            width: 200px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            border: none;
            margin-top: 30px;
        }

        .dev2-three {
            text-align: center;
            padding: 20px 0;
        }

        .dev2-three p {
            font-size: 48px;
            margin: 20px 0;
        }

        .dev2-three li {
            position: relative;
            display: inline-block;
            width: 370px;
            height: 205px;
        }

        .dev2-three li:first-of-type {
            background: url(https://overwatch.nosdn.127.net/a/images/2022/9/19/fb0f7d947cbec6b6eb66c5cad955b0c2.png) no-repeat;
            background-size: cover;
        }

        .dev2-three li:nth-of-type(2) {
            margin: 0 20px;
            background: url(https://overwatch.nosdn.127.net/a/images/2022/9/19/049ee58be650af08478089d6171c36a5.png)no-repeat;
            background-size: cover;
        }

        .dev2-three li:nth-of-type(3) {
            background: url(https://overwatch.nosdn.127.net/a/images/2022/9/19/123b6867e3a10d394b384bdbd08c840a.png) no-repeat;
            background-size: cover;
        }

        .dev2-three li div {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 40px;
            line-height: 40px;
            color: #fff;
            background-color: rgba(60, 60, 60, 0.7);
        }

        .dev2-three button {
            width: 300px;
            border: none;
            height: 40px;
            background-color: rgb(62, 190, 253);
            color: #fff;
            font-weight: 500;
            line-height: 40px;
            font-size: 20px;
            margin: 20px 0;
        }

        .dev2 button:hover {
            cursor: pointer;
            opacity: 0.7;
        }

        .dev2 li:hover {
            cursor: pointer;
        
        }

        .dev3-box {
            padding-top: 80px;
            background: url(https://overwatch.nosdn.127.net/1/assets/img/pages/home/candy.jpg);
            background-position: top;
            background-size: cover;
        }

        .dev3-main {
            margin-bottom: 44px;
            text-transform: none;
            font-style: italic;
            font-size: 4rem;
            font-weight: 400;
            font-variant: normal;
            line-height: normal;
            letter-spacing: .8px;
            color: #333;
            text-align: center;
        }

        .dev3-then {
            width: 624px;
            font-size: 24px;
            line-height: 1.6;
            margin-bottom: 1rem;
            text-rendering: optimizeLegibility;
            margin: 0 auto;
            color: #333;
        }

        .dev3-show_info {
            width: 100%;
            min-height: 200px;
            position: absolute;
            padding: 10px 0 15px;
            top: calc(50% - 100px);
            background-image: -webkit-linear-gradient(left, rgb(29 58 117 / 0%), rgba(42, 55, 81, .8) 25%, rgba(42, 55, 81, .8) 75%, rgba(42, 55, 81, 0));
            background-image: linear-gradient(65deg, rgba(42, 55, 81, 0) 0, rgba(42, 55, 81, .8) 25%, rgba(42, 55, 81, .8) 75%, rgba(42, 55, 81, 0));
            background-position: 50%;
            background-size: 1920px auto;
            z-index: 0;
            text-align: right;
            margin-top: 150px;
        }

        .dev3-show_info>h2 {
            font-style: italic;
            font-weight: 400;
            color: white;
            font-size: 60px;
            padding-right: 200px;
            padding-top: 40px;
        }

        .dev3-show_info>p {
            text-align: center;
            width: 400px;
            margin-top: 10px;
            color: white;
            padding-right: 100px;
            float: right;
        }

        .dev3-show_hero {
            width: auto;
            height: 460px;
            background: url("https://overwatch.nosdn.127.net/1/images/v2/home/overlay/ashe.png") no-repeat;
            background-size: auto 100%;
            background-position: 50% 50%;
            margin: 40px auto 0;
            /* position: absolute; */
        }

        .dev3-heros {
            width: 80%;
            margin: 0 auto;
        }

        .dev3-heros>ul {
            list-style: none;
            text-align: center;
        }

        .dev3-head {
            width: 70px;
            height: 84px;
            background-color: #333;
            transform: skew(25rad) translateX(-5px);
            border-radius: 10px;
            overflow: hidden;
            margin: 5px;
        }

        .dev3-headbg {
            width: 115%;
            height: 105%;
            transform: skew(-25rad) translateX(-5px);
        }

        .dev3-heros li:nth-of-type(1) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/2/heroes/Sigma/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(2) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/wrecking-ball/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(3) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/dva/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(4) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/orisa/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(5) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/reinhardt/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(6) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/roadhog/icon-portrait.png)no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(7) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/winston/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(8) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/zarya/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(9) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/echo/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(10) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/ashe/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(11) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/assets/images/hero/doomfist/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(12) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/bastion/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(13) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/genji/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(14) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/hanzo/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(15) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/junkrat/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(16) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/mccree/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(17) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/frost/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(18) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/pharah/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(19) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/reaper/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(20) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/soldier-76/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(21) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/sombra/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(22) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/symmetra/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(23) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/torbjorn/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(24) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/tracer/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(25) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/widowmaker/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(26) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/assets/images/hero/baptiste/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(27) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/ana/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(28) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/brigitte/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(29) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/lucio/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(30) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/mercy/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(31) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/assets/images/hero/moira/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-heros li:nth-of-type(32) .dev3-headbg {
            background: url(https://overwatch.nosdn.127.net/1/images/heroes/zenyatta/icon-portrait.png) no-repeat;
            background-size: cover;
            background-position: -10px;
        }

        .dev3-name {
            position: relative;
            display: inline-block;
            top: 4px;
            font-size: 13px;
            margin-left: -18px;
            padding: 1px 10px;
            color: #333;
            white-space: nowrap;
        }

        .dev3-heros li {
            display: inline-block;
            text-align: center;
            margin-bottom: 10px;
        }

        /* .dev3-heros li:hover .dev3-head {
            cursor: pointer;
            background: orange;
            
        } */

        .dev3-heros li:hover .dev3-name {
            background-color: aliceblue;
            border-radius: 5px;
            transform: translateY(-20px);
            padding: 2px 14px;
        }

        .dev3-join {
            background: url(https://overwatch.nosdn.127.net/1/assets/img/pages/home/candy.jpg);
            background-position: top;
            background-size: cover;
            padding-top: 60px;
            position: relative;
            margin-top: 120px;
        }

        .dev3-start {
            position: relative;
            width: 80%;
            height: 100%;
            margin: 0 auto;
            display: flex;
            flex-flow: column;
            justify-content: center;
            align-items: center;
        }

        .dev3-start>h2 {
            font-style: italic;
            font-weight: 400;
            color: #333;
            font-size: 60px;
            letter-spacing: 5px;
        }

        .dev3-start>p {
            margin: 10px 0;
            font-size: 25px;
            color: #333;
        }

        .dev3-start button {
            width: 150px;
            height: 40px;
            font-size: 20px;
            color: white;
            background-color: orange;
            font-weight: bold;
            border: none;
            margin: 10px;
        }

        .dev3-logo {
            width: 680px;
            height: 370px;
            background: url(https://overwatch.nosdn.127.net/1/assets/img/pages/home/brigitte-shoulder-flail.png);
            position: absolute;
            right: 0;
            top: -120px;
        }
        .dev3-div{
            position: relative;
            width: 100%;
            height: 780px
        }
    </style>
</head>

<body>

    <div class="dev1_box">
        <div class="dev1_tbox">
            <div class="dev1_top">
                <div></div>
                <div>
                    游戏
                    <div class="dev1_xb"></div>
                </div>
                <div>商城</div>
                <div>新闻</div>
                <div>
                    电子竞技
                    <div class="dev1_xb"></div>
                </div>
                <div>积分福利</div>
                <div class="dev1_fright">
                    <div>未成年人家长监护</div>
                    <div>支持</div>
                    <div>
                        我的账户
                        <div class="dev1_xb"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="dev1_content">
            <div class="dev1_buy clearfix">
                <div></div>
                <div>
                    游戏
                    <div class="dev1_ora"></div>
                </div>
                <div>英雄</div>
                <div>
                    活动
                    <div class="dev1_ora"></div>
                </div>
                <div>视频图片</div>
                <div>
                    新闻
                    <div class="dev1_ora"></div>
                </div>
                <div>下载</div>
                <div>
                    电子竞技
                    <div class="dev1_ora"></div>
                </div>
                <div>
                    社区
                    <div class="dev1_ora"></div>
                </div>
                <button>购买</button>
            </div>
            <video id="dev1_video" muted autoplay="autoplay" loop="loop">
                <source src="https://overwatch.nosdn.127.net/1/assets/img/pages/home/anniversary/header.webm">
            </video>
            <img class="dev1_18" src="https://blz.nosdn.127.net/1/common/CommonUnderAgeIconLev16.png" alt=""
                width="70px">
            <div class="dev1_suspend">
                <div></div>
                <div>暂停</div>
            </div>
            <div class="dev1_c_logo">
                <div></div>
                <div>
                    <button>新内容介绍</button>
                    <button>立即购买</button>
                </div>
            </div>
        </div>
    </div>
    <div class="dev2 dev2-one">
        <div class="dev2-one-img">
        </div>
        <div class="dev2-one-text">
            <h2 style="color:#49515b;font-weight:400">《守望先锋》“归来”</h2>
            <p>10月15日 正式上线 免费游玩</p>
            <p>所有玩家都可以参与其中，体验始终在线、不断演变的实时服务。这是《守望先锋》自问世以来所发布的最为宏大的更新，并将首先带来全新PvP体验、英雄、地图，以及全新的免费游玩模式。</p>
            <button>了解详情</button>
        </div>
    </div>
    <div class="dev2 dev2-two">
        <div class="dev2-two-left">
            <h2>登录游戏即可获得《守望先锋》“归来”先行者礼包 !</h2>
            <p>6月24日起登录游戏即可获得两款史诗皮肤，一款独家的先行者头像，以及《守望先锋》“归来”中的惊喜礼品。</p>
            <p><i>（地区时间可能有所不同）</i></p>
            <button>了解详情</button>
        </div>
        <div class="dev2-two-right">

        </div>
    </div>
    <div class="dev2 dev2-three">
        <p>新闻公告</p>
        <ul>
            <li>
                <div>《守望先锋》“归来”预约正式开启</div>
            </li>
            <li>
                <div>《守望先锋》“归来”雾紫游戏预览</div>
            </li>
            <li>
                <div>介绍:战令、商城、英雄解锁与其他</div>
            </li>
        </ul>
        <div><button>查看所有新闻</button></div>
    </div>
    <div class="dev3-box">
        <div class="dev3-title">
            <h2 class="dev3-main">
                各具特色的英雄
            </h2>
            <p class="dev3-then">
                不论喜欢哪种游戏方式，你总能找到适合自己玩法的英雄。掌握他们独特的技能玩法，享受《守望先锋》的无穷乐趣!
            </p>
        </div>
        <div class="dev3-show">
            <div class="dev3-show_info">
                <h2>查莉娅</h2>
                <p>
                    世界上最强壮的女性之一。为了保卫祖国，毅然放弃了个人荣誉。
                </p>
            </div>
          
                <div class="dev3-show_hero"></div>
            
        </div>
        <div class="dev3-heros">
            <ul>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">"西格玛"</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">"破坏球"</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">D.Va</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">奥丽莎</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">莱因哈特</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">"路霸"</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">温斯顿</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">查莉娅</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">"回声"</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">艾什</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">"轮椅铁拳"</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">"堡垒"</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">源氏</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">半藏</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">"狂鼠"</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">卡西迪</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">美</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">"法老之鹰"</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">"die!die!die!"</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">"士兵76"</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">"黑影"</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">"秩序之光"</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">托比昂</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">"裂空"</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">"黑百合"</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">巴蒂斯特</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">安娜</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">布丽吉塔</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">卢西奥</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">"天使"</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">莫伊拉</span>
                </li>
                <li>
                    <div class="dev3-head">
                        <div class="dev3-headbg">

                        </div>
                    </div>
                    <span class="dev3-name">禅雅塔</span>
                </li>
            </ul>
        </div>
        <div class="dev3-join">
            <div class="dev3-logo">

            </div>
            <div class="dev3-start">
                <h2>开始守望</h2>
                <p>加入终极团队动作游戏, 为未来而战</p>
                <button>立即购买</button>
            </div>
        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.6.1.js"></script>

<script>
    var sus = document.querySelector(".dev1_suspend");
    var vid = document.querySelector("video");
    var buy = document.querySelector(".dev1_buy");
    var bbol = true;
    var html = document.documentElement;
    sus.onclick = function () {
        if (bbol) {
            sus.firstElementChild.style.backgroundPositionY = "-32px";
            vid.pause();
        } else {
            sus.firstElementChild.style.backgroundPositionY = "0px";
            vid.play();
        }
        bbol = !bbol;
    }
    window.onscroll = function () {
        if (html.scrollTop >= 120) {
            buy.classList.add("dev1_fixed");
        } else {
            buy.classList.remove("dev1_fixed");
        }
    }
    $(".dev3-head").eq(9).css({"transform": "scale(1.2) skew(25rad) translateX(-5px)","backgroundColor":"orange"})
      
    var arr=["https://overwatch.nosdn.127.net/2/heroes/Sigma/full-portrait.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/wrecking-ball.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/dva.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/orisa.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/reinhardt.png","	https://overwatch.nosdn.127.net/1/images/v2/home/overlay/roadhog.png","	https://overwatch.nosdn.127.net/1/images/v2/home/overlay/winston.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/zarya.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/echo.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/ashe.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/doomfist.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/bastion.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/genji.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/hanzo.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/junkrat.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/mccree.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/mei.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/pharah.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/reaper.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/soldier-76.png","	https://overwatch.nosdn.127.net/1/images/v2/home/overlay/sombra.png","	https://overwatch.nosdn.127.net/1/images/v2/home/overlay/symmetra.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/torbjorn.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/tracer.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/widowmaker.png","	https://overwatch.nosdn.127.net/1/assets/images/hero/baptiste/full-portrait.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/ana.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/brigitte.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/lucio.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/mercy.png","	https://overwatch.nosdn.127.net/1/images/v2/home/overlay/moira-full-portrait.png","https://overwatch.nosdn.127.net/1/images/v2/home/overlay/zenyatta.png"]
    $(".dev3-heros li").hover(function(){
      
        $(".dev3-head").css({"transform": "scale(1) skew(25rad) translateX(-5px)","cursor": "pointer",
            "background": "#333"})
        $(".dev3-head").eq($(this).index()).css({"transform":"scale(1.2) skew(25rad) translateX(-5px)","cursor": "pointer",
            "background": "orange"})
        $(".dev3-show_hero").css({"background":`url(${arr[$(this).index()]}) no-repeat`,"background-size": "auto 100%",
            "background-position": "50% 50%"})
        
    })
</script>

</html>